{% load static %}
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>login</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- ICONS -->
    <link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <link rel="apple-touch-icon" sizes="76x76" href="{% static 'img/favicon.png' %}">
    <link rel="icon" type="image/png" sizes="96x96" href="{% static 'img/favicon.png' %}">
    <style>
        .bg {
            text-align: center;
            overflow: auto;
            margin: 10% 0;
            background-repeat: no-repeat;
            background-size: 100%;
            background: #f0f2f5;
            background-image: url('{% static 'img/bg.svg' %}');
            min-height: 100%;
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 100%;
            padding: 20px 0;
            position: relative;
        }

        h1 {
            margin-bottom: 2%;
        }

        .checkbox {
            margin: 5% 0 0 5%;
        }

        .btn-success {
            margin-top: 12px;
            width: 15%;
            margin-left: auto;
            margin-right: auto;
            display: inline-block;
            background-color: #1dc5a3;
            border-color: #1dc5a3;
            border-radius: 10px;
            color: white;
        }

        .btn-success:hover {
            background-color: #dda458;
            border-color: #dda458;
        }

        #particles-js {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }

        input {
            border-radius: 20%;
        }

        .page-header {
            background-color: #f7f7f7;
            border-color: #777777;
            width: 35%;
            margin-left: 30%;
            padding: 40px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
        }

        #btn {
            padding: 9px 14px;
            font-size: 14px;
            line-height: 1.3;
            border-radius: 2px;
            width: 45%;
            margin-top: 5%;
        }

        .simpleui1-input-inline {
            margin-top: 4%;
        }

        .main {
            margin-top: -2%;
        }
    </style>
</head>
<body class="bg">
<div class="main">
    <div class="panel">
        <h1>EasyTest-接口自动化测试平台</h1>
        <div class="page-header">
            <form id="loginForm" class="simpleui1-form" method="post" action="{% url 'login_action' %}">
                {% csrf_token %}
                <div id="navbar" class="navbar-collapse collapse">
                    <div class="simpleui1-input-inline">
                        <span><i class="fa fa-user"></i>&nbsp;账户：</span>
                        <input id="user" type="text" placeholder="username" name="username"
                               class="form-control"><br>
                    </div>
                    <br>
                    <div class="simpleui1-input-inline">
                        <span><i class="fa fa-lock"></i>&nbsp;密码：</span>
                        <input id="pswd" type="password" placeholder="password" name="password"
                               class="form-control">
                    </div>
                    <div class="checkbox">
                        <label><input id="remember" type="checkbox" checked>记住密码</label>
                        <a style="margin-left: 60px"
                           href="{% url 'register' %}">没有账号？点击注册</a><br>
                    </div>
                    <p class="errors" style="color: red; font-size: 12px"> {{ error }} </p>
                    <button type="submit" class="btn-success" id="btn">登录</button>
                </div>
            </form>
        </div>
        <div id="particles-js"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="{% static 'admin/simpleui-x/particles/particles.js' %}"></script>
<script type="text/javascript" src="{% static 'admin/simpleui-x/particles/app.js' %}"></script>
<script>
    window.onload = function () {
        var oForm = document.getElementById('loginForm');
        var oUser = document.getElementById('user');
        var oPswd = document.getElementById('pswd');
        var oRemember = document.getElementById('remember');
        //页面初始化时，如果帐号密码cookie存在则填充
        if (getCookie('user') && getCookie('pswd')) {
            oUser.value = getCookie('user');
            oPswd.value = getCookie('pswd');
            oRemember.checked = true;
        }
        //复选框勾选状态发生改变时，如果未勾选则清除cookie
        oRemember.onchange = function () {
            if (!this.checked) {
                delCookie('user');
                delCookie('pswd');
            }
        };
        //表单提交事件触发时，如果复选框是勾选状态则保存cookie
        oForm.onsubmit = function () {
            if (remember.checked) {
                setCookie('user', oUser.value, 7); //保存帐号到cookie，有效期7天
                setCookie('pswd', oPswd.value, 7); //保存密码到cookie，有效期7天
            }
        };
    };
    //设置cookie
    function setCookie(name, value, day) {
        var date = new Date();
        date.setDate(date.getDate() + day);
        document.cookie = name + '=' + value + ';expires=' + date;
    }
    //获取cookie
    function getCookie(name) {
        var reg = RegExp(name + '=([^;]+)');
        var arr = document.cookie.match(reg);
        if (arr) {
            return arr[1];
        } else {
            return '';
        }
    }
    //删除cookie
    function delCookie(name) {
        setCookie(name, null, -1);
    }
</script>